<template>
    <div class="register">
        <div class="div_register">
            <div class="register_img"></div>
            <input type="text" id="name" v-model="name" />
            <input type="password" id="key" v-model="key" />
            <input type="tel" id="phone" v-model="phone" />
            <input type="text" id="address" v-model="address" />
            <button id="register" @click="regist()">注册</button>
            <button id="goLogin" @click="goLogin()">去登录</button>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue } from 'vue-class-component';
import { UserApi } from '@/api/user';

export default class Register extends Vue {
    name = '';
    key = '';
    phone = '';
    address = '';
    checkPhone(phone) {
        if (!/^1[3|4|5|7|8]\d{9}$/.test(phone)) {
            return false;
        }
    }
    // 注册用户
    async regist() {
        if (this.name == '' || this.key == '' || this.phone == '') {
            alert('请输入注册信息');
            return;
        }
        if (this.checkPhone(this.phone)) {
            alert('手机号码有误，请重填');
            return;
        }
        const data = {
            user_name: this.name,
            password: this.key,
            phone: this.phone,
            address: this.address,
        };
        const res = await UserApi.regist(data);
        if (res.code == 0) {
            this.$router.push('/login');
        } else {
            alert(res.msg);
        }
    }
    goLogin() {
        this.$router.push('/login');
    }
}
</script>

<style lang="less" scoped>
.register {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-color: whitesmoke;
}
.register_img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 0;
    left: 50%;
    background-color: whitesmoke;
    background-image: url(../../public/img/static/register.png);
    background-repeat: no-repeat;
    background-position: 5px;
    background-size: 50px 50px;
    box-shadow: 3px 3px 10px #888888;
}
.div_register {
    width: 30%;
    height: 390px;
    min-width: 460px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 5px;
    box-shadow: 3px 3px 10px #888888;
}
.div_register input {
    width: 80%;
    height: 30px;
    margin: 40px 43px 0 43px;
    border: 1px solid black;
    border-radius: 5px;
}
#name {
    background-image: url(../../public/img/static/name.png);
    background-repeat: no-repeat;
    background-position: 0;
    text-indent: 35px;
}
#key {
    background-image: url(../../public/img/static/key.png);
    background-repeat: no-repeat;
    background-position: 0;
    text-indent: 35px;
}
#phone {
    background-image: url(../../public/img/static/phone.png);
    background-repeat: no-repeat;
    background-position: 0;
    text-indent: 35px;
}
#address {
    background-image: url(../../public/img/static/address.png);
    background-repeat: no-repeat;
    background-position: 0;
    text-indent: 35px;
}
#register,
#goLogin {
    width: 40%;
    height: 30px;
    margin: 20px 0;
    position: absolute;
    bottom: 10px;
}
#register {
    left: 43px;
}
#goLogin {
    right: 43px;
}
</style>
